<template>
  <el-container style="height: 100vh;">
    <!-- 左侧侧边栏 -->
    <el-aside width="200px" class="sidebar">
      <!-- 侧边栏顶部显示头像和用户名 -->
      <div class="user-info" style="display:grid">
        <img style="margin-left: 40px;" v-if="userStore.avatar" :src="userStore.avatar" alt="头像" class="avatar" />
        <img v-else src="@/assets/Photo/头像.png" alt="Avatar" class="avatar" />
        <span style="margin-left: 40px;" class="username">{{ userStore.nickname }}</span>
      </div>

      <el-menu :default-active="activeMenu" router>
        <router-link to="/myInfo/exchangeOrder">
          <el-menu-item index="/myInfo/exchangeOrder">
            <i class="el-icon-document"></i>
            交换订单
          </el-menu-item>
        </router-link>
        <router-link to="/myInfo/purchaseOrder">
          <el-menu-item index="/myInfo/purchaseOrder">
            <i class="el-icon-shopping-cart"></i>
            购买订单
          </el-menu-item>
        </router-link>
        <router-link to="/myInfo/collections">
          <el-menu-item index="/myInfo/collections">
            <i class="el-icon-star-on"></i>
            碳记录
          </el-menu-item>
        </router-link>
        <router-link to="/myInfo/honor">
          <el-menu-item index="/myInfo/honor">
            <i class="el-icon-medal"></i>
            荣誉
          </el-menu-item>
        </router-link>
        <router-link to="/myInfo/edit-info">
          <el-menu-item index="/myInfo/edit-info">
            <i class="el-icon-edit"></i>
            修改信息
          </el-menu-item>
        </router-link>
        <router-link to="/myInfo/points">
          <el-menu-item index="/myInfo/points">
            <i class="el-icon-coin"></i>
            管理订单
          </el-menu-item>
        </router-link>
        <router-link to="/myInfo/goodsManage">
          <el-menu-item index="/myInfo/goodsManage">
            <i class="el-icon-goods"></i>
            商品管理
          </el-menu-item>
        </router-link>
        <router-link to="/layout/news">
          <el-menu-item index="/news">
            <i class="el-icon-house"></i>
            返回首页
          </el-menu-item>
        </router-link>
      </el-menu>
    </el-aside>

    <!-- 右侧内容显示区 -->
    <el-container>
<!--      <el-header>-->
<!--        <h2>{{ currentRouteTitle }}</h2>-->
<!--      </el-header>-->
        <!-- 路由显示组件 -->
        <router-view />

    </el-container>
  </el-container>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user.js'; // 假设你在 stores 里有一个 user store

// 获取 stores 中的用户信息
const userStore = useUserStore();

// 获取当前路由
const route = useRoute();

// 动态计算当前激活的菜单项
const activeMenu = computed(() => route.path);

// 动态显示当前路由对应的标题
const currentRouteTitle = computed(() => {
  switch (route.path) {
    case '/myInfo/exchangeOrder':
      return '交换订单';
    case '/myInfo/purchaseOrder':
      return '购买订单';
    case '/myInfo/collections':
      return '碳记录';
    case '/myInfo/honor':
      return '荣誉';
    case '/myInfo/edit-info':
      return '修改信息';
    case '/myInfo/points':
      return '我的积分';
    case '/myInfo/myInfo/goodsManage':
      return '商品管理';
    case '/news':
      return '返回首页';
    default:
      return '';
  }
});
</script>

<style scoped>
.sidebar {
  background-color: #d4e7d1; /* 柔和的浅绿色背景 */
  height: 100vh; /* 保证侧边栏占满整个左侧 */
  position: fixed; /* 固定在最左边 */
  top: 0;
  left: 0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 轻微阴影使侧边栏更立体 */
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff; /* 白色背景 */
  border-bottom: 1px solid #eaeaea;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  border: 2px solid #8bc34a; /* 绿色边框 */
}

.username {
  font-size: 16px;
  font-weight: bold;
  color: #388e3c; /* 深绿色字体 */
}

.el-container {
  margin-left: 200px; /* 确保右侧内容避开侧边栏 */
}

h2 {
  font-size: 24px;
  text-align: center;
  color: #2e7d32; /* 深绿色标题 */
}

.el-menu-item {
  color: #388e3c; /* 绿色菜单项文字 */
}

.el-menu-item.is-active {
  background-color: #8bc34a !important; /* 激活项的背景绿色 */
  color: #ffffff !important; /* 激活项文字白色 */
}

.el-menu-item:hover {
  background-color: #aed581 !important; /* 悬停时的绿色背景 */
}

.el-header {
  background-color: #e8f5e9; /* 主体右侧绿色背景 */
  border-bottom: 2px solid #388e3c; /* 底部绿色边框 */
}

.el-main {
  padding: 20px;
  background-color: #ffffff;
  min-height: calc(100vh - 64px); /* 适应窗口大小 */
  position: relative;
}

/* 水印样式 */
.watermark-container::before {
  content: '地球知友';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 48px;
  color: rgba(56, 142, 60, 0.1); /* 浅绿色水印，透明度低 */
  pointer-events: none; /* 避免水印影响交互 */
  white-space: nowrap;
}
</style>
